<template>
  <div class="top w-100% h-100% flex items-center justify-between px-50">
    <div class="left flex flex-row">
      <div class="w-50px h-50px i-ps-grooveshark bg-[#0fa7f5]"></div>
      <span class="text-25px font-700 ml-50"> shark </span>
    </div>
    <div class="flex items-center">
      <span class="text-15px font-700 self-end"> 用户： </span>
      <span class="text-20px font-700 self-end"> 鲨鱼 </span>
			<a-badge :count="99" ml-20px>
				<a-avatar shape="square" size="large" />
			</a-badge>
      <i
        @click="toggleDark()"
				m-l-20
        icon-btn
        i-carbon-sun
        dark="i-carbon-moon bg-white"
      />
    </div>
  </div>
</template>

<script lang="ts" setup name="index-top-item">
import { useDark, useToggle } from "@vueuse/core";
import { onMounted } from "vue";

const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>

<style></style>
